<template>
  <el-container class="home-container">
    <!-- 侧边栏 -->
    <el-aside
        :width="isCollapse ? '64px' : '220px'"
        class="sidebar"
    >
      <!-- 侧边栏Logo -->
      <div class="sidebar-logo">
        <img src="/img/logo1.png" alt="Logo" class="logo-img" />
        <span v-if="!isCollapse" class="logo-text">LBS智慧营销平台</span>
      </div>

      <!-- 侧边栏菜单 -->
      <el-menu
          default-active="1"
          class="sidebar-menu"
          background-color="#2e66f5"
          text-color="#ffffff"
          active-text-color="#ffffff"
          router
          :collapse="isCollapse"
          :collapse-transition="false"
      >
        <!-- 首页 -->
        <el-menu-item index="/">
          <el-icon><House /></el-icon>
          <template #title>首页</template>
        </el-menu-item>

        <!-- 用户管理 -->
        <el-sub-menu index="user">
          <template #title>
            <el-icon><User /></el-icon>
            <span v-if="!isCollapse">用户管理</span>
          </template>
          <el-menu-item index="/user">用户列表</el-menu-item>
          <el-menu-item index="/user/group">人群管理</el-menu-item>
        </el-sub-menu>

        <!-- 店铺管理 -->
        <el-sub-menu index="shop">
          <template #title>
            <el-icon><Shop /></el-icon>
            <span v-if="!isCollapse">店铺管理</span>
          </template>
          <el-menu-item index="/shop/list">店铺列表</el-menu-item>
          <el-menu-item index="/shop/qrcode">二维码管理</el-menu-item>
        </el-sub-menu>

        <!-- 内容管理 -->
        <el-sub-menu index="content">
          <template #title>
            <el-icon><Document /></el-icon>
            <span v-if="!isCollapse">内容管理</span>
          </template>
          <el-menu-item index="/content/category">文章分类</el-menu-item>
          <el-menu-item index="/content/list">文章列表</el-menu-item>
          <el-menu-item index="/content/create">推文创作</el-menu-item>
        </el-sub-menu>

        <!-- 营销管理 -->
        <el-sub-menu index="marketing">
          <template #title>
            <el-icon><Present /></el-icon>
            <span v-if="!isCollapse">营销管理</span>
          </template>
          <el-menu-item index="/marketing/activity">活动管理</el-menu-item>
          <el-menu-item index="/marketing/coupon">优惠券管理</el-menu-item>
        </el-sub-menu>

        <!-- 触达管理 -->
        <el-sub-menu index="reach">
          <template #title>
            <el-icon><Message /></el-icon>
            <span v-if="!isCollapse">触达管理</span>
          </template>
          <el-menu-item index="/reach/timing-message">定时消息</el-menu-item>
          <el-menu-item index="/reach/timing-push">定时推送</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>

    <!-- 主内容区 -->
    <el-container class="main-container">
      <!-- 顶部栏 -->
      <el-header class="top-bar">
        <div class="top-left">
          <el-button
              :icon="Menu"
              circle
              class="toggle-btn"
              @click="isCollapse = !isCollapse"
          ></el-button>

          <!-- 面包屑导航 -->
          <el-breadcrumb separator="/" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item
                v-for="(item, index) in breadcrumb"
                :key="index"
                :to="getBreadcrumbPath(index)"
            >
              {{ item }}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>

        <div class="top-right">
          <!-- 通知图标 -->
          <el-button :icon="Bell" circle class="icon-btn"></el-button>

          <!-- 用户信息下拉 -->
          <el-dropdown trigger="click">
            <div class="user-info">
              <el-avatar :size="32" class="avatar">
                <img src="/img/avatar.png" alt="用户头像" />
              </el-avatar>
              <span class="user-name">{{ userName }}</span>
              <el-icon class="arrow-down"><ChevronDown /></el-icon>
            </div>
            <template #dropdown>
              <el-dropdown-menu align="end">
                <el-dropdown-item>个人中心</el-dropdown-item>
                <el-dropdown-item>系统设置</el-dropdown-item>
                <el-dropdown-item divided @click="handleLogout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>

      <!-- 页面内容区域 -->
      <el-main class="page-content">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
// 引入需要的图标
import {
  House, User, Shop, Document, Present, Menu,
  Bell, ChevronDown, Message
} from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';

// 侧边栏折叠状态
const isCollapse = ref(false);

// 路由和用户信息
const route = useRoute();
const router = useRouter();
const userName = ref('');
const breadcrumb = ref([]);

// 路由路径与面包屑的映射关系
const pathBreadcrumbMap = {
  '/user': ['用户管理', '用户列表'],
  '/user/group': ['用户管理', '人群管理'],
  '/shop/list': ['店铺管理', '店铺列表'],
  '/shop/qrcode': ['店铺管理', '二维码管理'],
  '/content/category': ['内容管理', '文章分类'],
  '/content/list': ['内容管理', '文章列表'],
  '/content/create': ['内容管理', '推文创作'],
  '/marketing/activity': ['营销管理', '活动管理'],
  '/marketing/coupon': ['营销管理', '优惠券管理'],
  '/reach/timing-message': ['触达管理', '定时消息'],
  '/reach/timing-push': ['触达管理', '定时推送']
};

// 页面加载时初始化
onMounted(() => {
  // 获取登录用户信息
  const userInfo = JSON.parse(localStorage.getItem('user') || '{}');
  userName.value = userInfo.name || '管理员';

  // 初始化面包屑
  updateBreadcrumb(route);

  // 监听路由变化
  router.beforeEach((to, from, next) => {
    updateBreadcrumb(to);
    next();
  });
});

// 更新面包屑导航
const updateBreadcrumb = (currentRoute) => {
  breadcrumb.value = pathBreadcrumbMap[currentRoute.path] || [];
};

// 获取面包屑对应的路径
const getBreadcrumbPath = (index) => {
  const currentPath = route.path;
  // 找到当前路径在映射表中的键
  const matchedKey = Object.keys(pathBreadcrumbMap).find(key => key === currentPath);
  if (!matchedKey) return '';

  // 根据索引返回对应的父路径
  const pathSegments = matchedKey.split('/').filter(segment => segment);
  return '/' + pathSegments.slice(0, index + 1).join('/');
};

// 退出登录
const handleLogout = () => {
  localStorage.removeItem('user');
  localStorage.removeItem('viewType');
  router.push('/login');
  ElMessage.success('退出登录成功');
};
</script>

<style scoped>
.home-container {
  height: 100vh;
  overflow: hidden;
}

/* 侧边栏样式 */
.sidebar {
  background-color: #2e66f5;
  color: #fff;
  transition: width 0.3s;
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo-img {
  width: 32px;
  height: 32px;
  border-radius: 4px;
}

.logo-text {
  margin-left: 10px;
  font-size: 16px;
  font-weight: 500;
}

.sidebar-menu {
  margin-top: 10px;
  border-right: none !important;
}

:deep(.el-menu-item.is-active),
:deep(.el-sub-menu__title:hover) {
  background-color: #1a53e5 !important;
}

/* 主内容区样式 */
.main-container {
  width: 100%;
  overflow: hidden;
}

/* 顶部栏样式 */
.top-bar {
  height: 60px;
  padding: 0 20px;
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 5;
}

.top-left {
  display: flex;
  align-items: center;
}

.toggle-btn {
  background-color: #f5f7fa;
  margin-right: 15px;
}

.breadcrumb {
  font-size: 14px;
}

.top-right {
  display: flex;
  align-items: center;
}

.icon-btn {
  background-color: transparent;
  margin-right: 10px;
}

.user-info {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 20px;
  transition: background-color 0.2s;
}

.user-info:hover {
  background-color: #f5f7fa;
}

.avatar {
  margin-right: 8px;
}

.user-name {
  font-size: 14px;
  font-weight: 500;
}

.arrow-down {
  font-size: 16px;
  margin-left: 5px;
}

/* 页面内容区域 */
.page-content {
  padding: 20px;
  background-color: #f5f7fa;
  height: calc(100vh - 60px);
  overflow-y: auto;
}
</style>